<template>
  <div >
      <h1 class="hello" id="hello">hello 测试</h1>
      用户名：<input type="text" v-model="user.name" >
       密码：<input type="password" v-model="user.pwd"  v-ddd>
      <button type="button" @click="login">测试</button>

     <button type="button" @click="toUrl" v-power="false" >跳转</button>

    <button type="button" @click="toValue" v-power="true">跳转页面并且传值</button>

    <button type="button" @click="toGet" v-see="isShow">get请求</button>
    <button type="button" @click="toPost">post请求</button>

    <button type="button" @click="tuStore">演示Vuex共享数据的使用</button>
  </div>

</template>

<script>
  //导入外部 js
  import {test,hello} from '../../assets/js/hello';
  //导入外部 含有js对象的js文件
  import user from '../../assets/js/hello_object'

  /*导入qs模块*/
  import Qs from 'qs'

  /*导入vuex的设置管理的对象*/
  import {mapActions} from 'vuex'

    export default {
        name: "Hello",
        data(){
          return{
              user:{
                 name:"rock",
                 pwd:"123"
              },
              isShow:false
          }
        },
        directives:{ //局部指令
              ddd:{
                inserted:function(el) {
                    el.focus();
                }
              }
        },
      methods:{
          /*引入name的set方法*/
          ...mapActions(["setName"]),
              login(){
                  alert(this.user.name);
                  //调用外部 js方法
                  test();
                //调用外部 js变量
                  console.log("变量值hello="+hello);
                  user.run();
                  var v = $("#hello").text();
                  console.log("h1标题="+v);
              },
              toUrl(){
                //第一种:用push访问Hello_two组件
                this.$router.push("/helloTwo");
                //第二种:用push访问Hello_two组件
                //区别：push方法 跳转可以回退到上一个页面，安全性低
                // replace 方法 跳转不可以回退到上一个页面，安全性高
                //this.$router.replace("/helloTwo");
              },
              toValue(){
                //假设登录成功，把用户名存入本地存储中
                localStorage.setItem("name",this.user.name);
                //第一种：用push访问Hello_two组件，并且传值
                this.$router.push({"name":"helloTwo",query:this.user})
              },
              toGet(){
                //第一种：简写

                const  http = this.$http.get("/test/get",{params:{"name":"张三"}});
                http.then(function (rs) {//对应的success
                    console.log(rs.data);
                    if(rs.data.code==200){
                      console.log("成功")
                    }
                })
                // /*第二种：完整写法*/
                // axios({
                //   headers:{'Content-Type':'application/json'},
                //   url:"http://localhost:8080/test/get",
                //   method: "get",
                //   params:{
                //     "name":"张三"
                //   }
                // }).then(function (rs) {
                //   console.log(rs.data);
                // }).catch(function (rs) {//如果响应后端出差，执行的回调函数
                //   console.log(rs);
                // })
              },
              toPost(){
               //第一种：简写
                 this.$http.post("/test/post",{"name":"李四"})
                .then(function (rs) {
                  if(rs.data.code==200){
                    console.log("成功")
                  }
                })

                /*第二种：完整写法*/
                // axios({
                //   headers:{'Content-Type':'application/x-www-form-urlencoded'},
                //   url:"http://localhost:8080/test/post",
                //   method: "post",
                //   data:Qs.stringify({"name":"李四"}),
                // }).then(function (rs) {
                //   console.log(rs.data);
                // }).catch(function (rs) {//如果响应后端出错，执行的回调函数
                //   console.log(rs);
                // })
             },
              tuStore(){
                  //假设登录成功，把用户名赋值给共享数据name
                  this.setName(this.user.name);
                  //调转到helloTwo组件
                  this.$router.push("/helloTwo");
              }
        }
    }
</script>

<style>

   .myText{
      color:red
   }
</style>
